<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./fonts//demo.css"> -->
  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .space_slide {
      margin: 10px 20px 30px 20px;
    }

    #banner_add_out {
      display: none;

    }

    #banner_change_out {
      display: none;

    }

    tbody .layui-table-cell {
      height: 70px;
    }
  </style>
</head>

<body>
  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="https://5aebf8b605931.t73.qifeiye.com/">首页</a>
        <a href="javascript:;">首页管理</a>
        <!-- <a href="">轮播图管理</a> -->
        <a><cite>轮播图管理</cite></a>
      </span>
    </div>
    <div class="layui-card-body">
      <table class="layui-table" id="banner_list" lay-even lay-skin="row" lay-size="sm"> </table>

    </div>
  </div>

  <!-- 添加的弹出层 -->
  <div id="banner_add_out">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">轮播图名称</label>
        <div class="layui-input-inline">
          <input type="text" name="banner_name" required lay-verify="required" placeholder="请输入轮播图名称" autocomplete="off"
            class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">轮播图排序</label>
        <div class="layui-input-inline">
          <input type="number" name="banner_sort" required lay-verify="required|number" placeholder="请输入轮播排序"
            autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">只能输入数字类型</div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">上传轮播图</label>
        <button type="button" class="layui-btn" id="banner_img_upload">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <input type="hidden" name="banner_img" id="banner_ipt_upload" class="layui-input">
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <blockquote class="layui-elem-quote">预览图:
            <div>

              <img src="" class="thumb" width="200" id="banner_preview_upload" alt="">
            </div>
          </blockquote>
        </div>
      </div>


      <div class="layui-form-item">
        <label class="layui-form-label">是否展示</label>
        <div class="layui-input-block">
          <input type="checkbox" name="banner_show" lay-skin="switch" checked lay-text="展示|隐藏" value="1">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="bannerAddForm">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>




  <!-- 修改的弹出层 -->
  <!-- TODO: -->
  <div id="banner_change_out">
    <form class="layui-form" action="">

 
      <div class="layui-form-item">
        <label class="layui-form-label">轮播图名称</label>
        <div class="layui-input-inline" style="margin-top: 10px;">
          <input type="text" name="banner_name" required lay-verify="required" placeholder="请输入轮播图名称" autocomplete="off"
            id="out_update_name" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">轮播图排序</label>
        <div class="layui-input-inline">
          <input type="number" name="banner_sort" required lay-verify="required|number" placeholder="请输入轮播排序"
            id="out_update_sort" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">只能输入数字类型</div>
      </div>

     <!-- 隐藏的id  input -->
     <input type="hidden" name="banner_id" id="update_banner_id">

      <div class="layui-form-item">
        <label class="layui-form-label">上传轮播图</label>
        <button type="button" class="layui-btn" id="change_banner_img_upload">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <!-- 新图片地址 -->
        <input type="hidden" name="banner_img" id="newout_update_img" class="layui-input">
        <!-- 旧图片地址 -->
        <input type="hidden" name="old_banner_img" id="oldout_update_img" class="layui-input">
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <blockquote class="layui-elem-quote">预览图:
            <div>

              <img src="" class="thumb" width="200" id="out_update_img_look" alt="">
            </div>
          </blockquote>
        </div>
      </div>


      <div class="layui-form-item">
        <label class="layui-form-label">是否展示</label>
        <div class="layui-input-block">
          <input type="checkbox" id="out_update_show" name="banner_show" lay-skin="switch" checked="false"
            lay-text="展示|隐藏" value="1">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="bannerUpdateAllForm">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
</body>


</html>
<script src="/admin/lib/layui/layui.js"></script>

<!-- 操作模块 -->
<script type="text/html" id="operation">
  <button type="button" onclick="updateAllBanner('{{d.banner_id}}')" class="layui-btn layui-btn-xs layui-btn-warm">修改</button>
  <button type="button" class="layui-btn   layui-btn-xs layui-btn-danger"
    onclick="deleteBanner('{{d.banner_id}}','{{d.banner_img}}')">删除</button></div>
</script>
<!-- 是否展示模块 -->
<script type="text/html" id="banner_show">
  <div>
    <span class="layui-btn {{d.banner_show==1?'':'layui-btn-danger'}}"
      onclick="change_show('{{d.banner_id}}','{{d.banner_show==1?0:1}}')"
      style="height: 27px;line-height: 27px;">{{d.banner_show==1?"已展示":"已隐藏"}}</span>
  </div>
</script>
<!-- 轮播图排序 -->
<script type="text/html" id="banner_sort_list">
  <div>
    <input type="text" class="layui-input" autocomplete="off" value="{{d.banner_sort}}"
      onchange="updateSort('{{d.banner_id}}',this)"
      style="width: 50px;border-color: #999;padding-left: 0;text-align: center;height: 27px;">
  </div>
</script>
<!-- 表格上方操作 -->
<script type="text/html" id="banner_list_top">
  <div>

    <span type="button" class="layui-btn layui-btn-danger" onclick="deleteBannerAll()" style="margin-right: 10x;"><i
        class="layui-icon layui-icon-delete"></i>批量删除</span>
    <span type="button" class="layui-btn layui-btn-normal" onclick="banner_add()" style=" margin-right: 20px;"><i
        class="layui-icon layui-icon-add-1"></i>添加</span>
    <div class=" layui-input-inline">
      <!-- 搜索当成表单来做就好了 -->
      <!-- <button lay-submit lay-filter="*">提交</button>     -->
      <input type="text" name="search" placeholder="请输入导航名称" id="search_input" autocomplete="off" class="layui-input">
    </div>
    <button type="button" lay-submit lay-filter="search" id="search_button" onclick="search()" class="layui-btn"><i
        class="layui-icon layui-icon-search"></i>
      查询</button>
  </div>
</script>
<script type="text/html">
  <div>
    <img src="{{d.banner_img}}" alt="">
  </div>
</script>
<script>
  // window.onload = function () {

  // var upload
  var layer
  var $
  var form
  var uploadLayer
  var tableIns
  var table
  // var updateUploadIns
  //注意：导航 依赖 element 模块，否则无法进行功能性操作
  // //JS
  // var search_input = document.querySelector('#search_input')
  // console.log(search_input);
  // $('#search_input').val()
  // console.log($('#search_input').val());
  // todo:
  // 弹出添加层次页面
  function banner_add() {
    uploadLayer = layer.open({
      type: 1,
      area: '600px',
      title: '添加轮播',
      content: $('#banner_add_out')
    })
  }

  // 批量删除按钮
  function deleteBannerAll() {
    var checkStatus = table.checkStatus('banner_list');
    console.log(checkStatus.data.length);
    var ids
    if (checkStatus.data.length > 0) {
      // 选中大于1
      var idsArray = [];
      for (var i = 0; i < checkStatus.data.length; i++) {
        idsArray.push(checkStatus.data[i].banner_id);
      }
      ids = idsArray.toString();
      // console.log(ids);
      // layui.layer.alert(ids);
      console.log(ids);
      var deleteAllIns = layer.confirm('您确认要将选中的全部删除么', {
        btn: ['删除', '取消'],
      }, function (index, layero) {
        $.ajax({
          type: 'get',
          data: {
            ids
          },
          url: '/admin/banner/deletecheck',
          success: res => {
            if (res.code == 1) {
              tableIns.reload()
              layer.close(deleteAllIns)
            }
          }
        })
      }, function (index) {
        //按钮【按钮二】的回调
        // console.log('no');
      });

      // $(".layui-form-checked").not('.header').parents('tr').remove();
    } else {
      layui.layer.alert("请至少选择一行");
    }
  }


  // 弹出修改层页面
  function updateAllBanner(id) {
    // 获取元素   // BUG:  这里不能渲染开关复选框
    // console.log(banner_show);
    // console.log($('#out_update_show').prop("checked"));
    // $('#out_update_show').val(banner_show)
    // console.log($('#update_banner_id'));

    // $('#out_update_show').removeAttr('checked')
    // form.render()
    // } else {
    // $('#out_update_show').prop("checked", false);

    // }
    $.ajax({
      type: 'get',
      url: `/admin/banner/updateall?id=${id}`,
      success: (res) => {
        if (res.code == 1) {
          // 修改的弹出层
          updateLayer = layer.open({
            type: 1,
            area: '600px',
            title: '修改轮播图信息',
            content: $('#banner_change_out')
          })
          var data = res.data
          // console.log(data);
          // console.log(data[0].banner_id);
          var {
            banner_id,
            banner_img,
            banner_name,
            banner_sort
          } = res.data[0]
          var banner_show = res.data[0].banner_show

          // 渲染弹出层
          $('#update_banner_id').val(banner_id)
          $('#out_update_name').val(banner_name)
          $('#out_update_sort').val(banner_sort)
          // 旧地址
          $('#oldout_update_img').val(banner_img)
          // 新地址
          $('#newout_update_img').val(banner_img)
          // 预览图
          $('#out_update_img_look').attr('src', banner_img)
          if (banner_show == 1) {
            $('#out_update_show').prop("checked", true);
          } else {
            $('#out_update_show').prop("checked", false);
          }
          // $('#out_update_show').prop("checked", function (i, banner_show) {
          //   if (banner_show == 1) {
          //     return true;
          //   } else {
          //     return false
          //   }
          // });
          // console.log($('#out_update_show').prop("checked"))

          // TODO:表单的提交
          form.on('submit(bannerUpdateAllForm)', function (data) {
            // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            // f发起ajax请求
            $.ajax({
              type: 'post',
              data: data.field,
              url: '/admin/banner/updateall',
              dataType: 'json',
              success: (res) => {
                // 提示信息 成功失败都有  表格重载 关闭弹框
                if (res.code == 1) {
                  // 修改成功
                  // 表格重载
                  tableIns.reload()
                  layer.close(updateLayer)
                }
                layer.msg(res.msg)
              }
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
          });
        }
      }

      // form.on()
    })



  }

  // 显示按钮更改
  function change_show(id, banner_Show) {
    $.ajax({
      type: 'post',
      url: '/admin/banner/changershow',
      data: {
        id,
        banner_Show
      },
      success: (res) => {
        if (res.code == 1) {
          tableIns.reload()
        }
        layer.msg(res.msg)
      }
    })
  }




  // 操作中的删除按钮
  // deleteBanner('{{d.banner_id}}
  function deleteBanner(id, img) {
    // console.log(id, img);
    // $.
    var deleteIns = layer.confirm('您确认要删除么', {
      btn: ['删除', '取消'],
    }, function (index, layero) {
      //按钮【按钮一】的回调
      // console.log('yes');
      $.ajax({
        type: 'get',
        url: `/admin/banner/delete?id=${id}&img=${img}`,
        dataType: 'json',
        success: (res) => {
          if (res.code == 1) {
            // 删除成功
            // 把弹出框关掉
            layer.open({
              title: '删除提示',
              content: res.msg,
              type: 0,
              icon: 1
            });
            // layyer.close(deleteIns)
          }
          // 弹出提示
          layer.open({
            title: '删除提示',
            content: res.msg,
            type: 0,
            icon: 2
          });
          tableIns.reload()

        }
      })
    }, function (index) {
      //按钮【按钮二】的回调
    });
  }

  // 修改排序表单
  function updateSort(id, obj) {
    $.get(`/admin/banner/update?id=${id}&banner_sort=${obj.value}`, (res) => {
      // let {
      //   code,
      //   msg
      // } = res
      if (res.code == 0) {
        // 修改成功
        // tableIns.reload()
      }
      layer.msg(res.msg)
    })
    // $.ajax({
    //   type: 'get',
    //   url: `/admin/banner/update?id=${id}&sort=${obj.value}`,
    //   dataType: 'json',
    //   success: (res) => {
    //   }
    // })
  }


  layui.use(['element', 'layer', 'util', 'jquery', 'table', 'upload', 'form'], function () {
    var {
      // table,
      element,
      util,
      upload
      // $
    } = layui
    $ = layui.$
    layer = layui.layer
    form = layui.form
    table = layui.table
    // upload = layui.upload
    // 表格渲染
    tableIns = table.render({
      elem: '#banner_list',
      url: '/admin/banner/list',
      cols: [
        [{
          field: 'banner_checked',
          width: '5%',
          type: 'checkbox',
          fixed: 'left'
        }, {
          field: 'banner_id',
          title: 'ID',
          width: '10%',
          sort: true,
        }, {
          field: 'banner_name',
          title: '轮播图名称',
          width: '20%',
        }, {
          field: 'banner_img',
          title: '轮播图预览',
          width: '25%',
          templet: '<div><img src="{{d.banner_img}}" alt=""  width=500></div>'
        }, {
          field: 'banner_sort',
          title: '轮播图排序',
          sort: true,
          width: '10%',
          templet: '#banner_sort_list'
        }, {
          field: 'banner_show',
          title: '是否展示',
          width: '15%',
          templet: '#banner_show',
        }, {
          field: 'experience',
          title: '操作',
          width: '15%',
          templet: '#operation',
          fixed: 'right'
        }]
      ],
      loading: true,
      toolbar: '#banner_list_top',
      title: '轮播图信息详情表',
      // totalRow: true,
      page: true,
      limits: [5, 10, 15, 20, 30, 50, 70, 80, 90, 100],
      limit: 5
    })


    form.on('submit(search)', function (data) {
      tableIns.reload({
        where: { //设定异步数据接口的额外参数，任意设
          search: data.field.search,
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    })
    /* TODO: */
    // 修改按钮文件上传
    var out_update_img_look = $('#out_update_img_look')
    var newout_update_img = $('#newout_update_img')
    var updateUploadIns = upload.render({
      elem: '#change_banner_img_upload', //上传文件按钮
      url: '/admin/banner/upload', //上传文件的接口
      done: function (res) {
        //上传完毕回调
        if (res.code == 1) {
          // 上传成功
          /* 
          code: 1
          url: "/admin/uploads/file-1657342526278.jpg" */
          out_update_img_look.attr('src', res.url)
          newout_update_img.val(res.url)
          // console.log(banner_ipt_upload);
        }
      },
    })




    // 文件上传
    var banner_preview_upload = $('#banner_preview_upload')
    var banner_ipt_upload = $('#banner_ipt_upload')
    var uploadIns = upload.render({
      elem: '#banner_img_upload', //上传文件按钮
      url: '/admin/banner/upload', //上传文件的接口
      done: function (res) {
        //上传完毕回调
        if (res.code == 1) {
          // 上传成功
          /* 
          code: 1
          url: "/admin/uploads/file-1657342526278.jpg" */
          banner_preview_upload.attr('src', res.url)
          banner_ipt_upload.val(res.url)
          // console.log(banner_ipt_upload);
        }
      },
    })
    // 点击提交  添加轮播图
    form.on('submit(bannerAddForm)', function (data) {
      // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
      // 发起Ajax请求
      $.ajax({
        type: 'post',
        url: '/admin/banner/insert',
        data: data.field,
        dataType: 'json',
        success: (res) => {
          if (res.code == 0) {

            // 插入成功
            // 关闭弹框  显示提示  从新渲染数据
            // uploadIns
            layer.close(uploadLayer)
            // layer.closeAll();
            tableIns.reload()
          }
          layer.msg(res.msg)
        }
      })
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function (othis) {
        layer.msg('展开左侧菜单的操作', {
          icon: 0
        });
      },
      menuRight: function () {
        layer.open({
          type: 1,
          content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
          area: ['260px', '100%'],
          offset: 'rt', //右上角
          anim: 5,
          shadeClose: true,
        });
      },
    });
  });
  // }
</script>